import React from 'react'
import PCNewsBlock from './pc_news_block'
import {Router, Route, Link, browserHistory} from 'react-router'
import {Row, Col, Tabs, Carousel} from 'antd'
import PCNewsImageBlock from './pc_news_image_block'
import PCCarousel from './pc_carousel'

const TabPane = Tabs.TabPane

export default class PCNewsContainer extends React.Component {
    constructor() {
        super()
        this.state = {
            carouse: ''
        }
    }

    componentWillMount() {
        const myFetchOptions = {
            method: 'GET'
        }
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=top&count=4", myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({carouse: json})
            })

    }

    render() {
        var settings = {
            dots: true,
            infinite: true,
            autoplay: true,
            speed: 500,
            pauseOnHover: true,
            draggable: true, //鼠标拖拽
        }
        let listSiteShow = [];
        if (this.state.carouse.length > 0) {
            for (var i = 0; i < this.state.carouse.length; i++) {
                listSiteShow.push(
                    <Link to={`details/${this.state.carouse[i].uniquekey}`} key={i} target="_blank">
                        <div>
                            <img src={this.state.carouse[i].thumbnail_pic_s} alt=""/>
                        </div>
                    </Link>
                );
            }
        } else {
            listSiteShow.push(<div key="1"></div>);
        }


        return (
            <div>
                <Row>
                    <Col span={2}></Col>
                    <Col span={20} className="container">
                        <div className="leftContainer">
                            <Carousel {...settings} className="mobile_carousel">
                                {listSiteShow}
                            </Carousel>
                            <PCNewsImageBlock count={6} type={"guonei"} width="400px" cardTitle="国内头条"
                                              imageWidth="112px"/>
                        </div>
                        <Tabs className="tabs_news">
                            <TabPane tab="头条新闻" key="1">
                                <PCNewsBlock count={30} type={"top"} width="100%" bordered="false"/>
                            </TabPane>
                            <TabPane tab="国际" key="2">
                                <PCNewsBlock count={30} type={"guoji"} width="100%" bordered="false"/>
                            </TabPane>
                        </Tabs>
                        <div>
                            <PCNewsImageBlock count={12} type={"keji"} width="100%" cardTitle="科技" imageWidth="131px"/>
                            <PCNewsImageBlock count={14} type={"yule"} width="100%" cardTitle="娱乐" imageWidth="131px"/>
                        </div>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </div>
        )
    }
}